<!--自定义头-->
<style scoped>
  input {
    border: none;
  }

  .slotCustomM {
    flex: 0 0 60%;
    height: 2.2rem;
    text-align: center;
    line-height: 2.2rem;
    color: #fff;
    font-size: .8rem;
  }
</style>


<style scoped>
  section {
    background: #f0f0f0;
    width: 100%;
    min-height: 40rem;
    font-size: .9rem;
  }

  section > div {
    margin: 0 .5rem;
  }

  .search {
    margin-top: 2.2rem;
    background-color: #eee;
    padding: .25rem .5rem;
  }

  .staffList .search .searchInput {
    width: 100%;
    height: 2rem;
    font-size: .75rem;
    display: block;
    border-radius: .25rem;
    background: #fff url("../../assets/images/searchBlue.png") no-repeat .75rem center;
    background-size: 1rem 1rem;
    padding: 0 2rem;
    box-sizing: border-box;
    border: none;
    text-align: center;
  }

  .department {
    overflow: scroll;
    margin: 0 auto .375rem;
    height: 2.5rem;
    background-color: #fff;
    line-height: 2.5rem;
    font-size: .8rem;
    box-sizing: border-box;
    position: relative;
  }

  .departBox {
    height: 2.25rem;
    overflow: auto;
  }

  .departmentInfo {
    width: 17.75rem;
    text-align: center;
    font-size: .8rem;
  }

  .item-depart {
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 2px auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 0 .25rem;
    box-sizing: border-box;
  }

  .icon-enter {
    font-size: .9rem;
  }

  .departName {
    float: left;
  }

  .departIco {
    float: right;
  }

  .item-name {
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 2px auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 0 .25rem;
    box-sizing: border-box;
  }

  .noStaff {
    color: #999;
    font-size: .65rem;
    float: right;
    padding-right: .5rem;
  }
</style>
<template>
  <div class="staffList">
    <headNavCustom @headCustomBack="headCustomBack">
      <div class="slotCustomM">列表选择</div>
    </headNavCustom>
    <div class="search">
      <input type="search" placeholder="请输入部门名称/姓名" class="searchInput" @input="change($event)" v-model="searchValue">
    </div>
    <section>
      <div>
        <div class="department">
          <div class="departBox">
            <input type="text" readonly v-model="department1" class="departmentInfo">
          </div>
        </div>
        <div style="margin-bottom: 20px">
          <div class="item-depart fix" v-for="(item,index) in orgShowForm" @click="clickDepart(index)">
            <div class="departName">{{item.name}}({{item.peopleNumber}})</div>
            <div class="departIco">
              <i class="iconfont icon-enter"></i>
            </div>
          </div>
        </div>
        <div class="item-name" v-for="item in userList" @click="addPassenger2(item)">
          {{item.fullname}} <span v-show="item.travellerType == '1'" class="noStaff">非员工</span>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  import headNavCustom from '@/components/headNavCustom.vue'
  import {Indicator} from 'mint-ui';
  import {common} from 'wxm-common';

  export default{
    data(){
      return {
        departNum: 0,
        departTab: 2,
        department: [], //        部门
        orgShowForm: [
          {
            id: '',
            name: '',
            peopleNumber: ''
          },
        ], //        员工
        userList: [
          {
            userId: '',
            fullname: ''
          },
        ],
        orgShowFormArr: [],
        userListArr: [],
        searchValue: '',
        timer: ''
      }
    },
    components: {headNavCustom},
    methods: {
      init(){
        let that = this;
        that.$vux.loading.show({
          text: '加载中...'
        })

        //增加乘机人 列表选择 从部门列表中选择拿到数据
        common.getUsersByOrgId(null, (res) => {
          that.$vux.loading.hide();
          that.$store.state.staffList.res = res;
          that.$router.push({
            name: 'staffList',
            params: {}
          });
        }, (err) => {
          that.$vux.loading.hide();
          $flightTools.errorToIndex(that);
        });
      },
      headCustomBack(){
        this.departTab = 3;
        if (this.departNum == 0) {
          /*switch (this.$store.state.entryCode) {
           case 1:
           this.$router.push({
           name: "booking"
           })
           break;
           case 2:
           this.$router.push({
           name: "booking"
           })
           break;
           case 3:
           {
           this.$router.push({
           name: "trainBooking"
           });
           break;
           }
           case 4:
           {
           this.$router.push({
           name: "returnbooking"
           });
           break;
           }
           }*/
          this.$router.go(-1);
        } else {
          this.departNum--;
          this.department.pop();
          this.orgShowFormArr.pop();
          this.userListArr.pop();
          this.orgShowForm = this.orgShowFormArr[this.departNum];
          this.userList = this.userListArr[this.departNum];
        }

      },
      clickDepart(index){
        var name = this.orgShowForm[index].name;
        var id = this.orgShowForm[index].id;
        this.department.push(name);
        this.departNum++;
        this.ajax(id);
      },
      change(e){
        clearInterval(this.timer);
        var that = this;
        var value = e.target.value;
        this.timer = setTimeout(function () {
          if (that.searchValue == value && value) {
            that.inputSearch(value)
          }
        }, 1000)
      },
      inputSearch(value){
        var that = this;
        that.$vux.loading.show({
          text: '加载中...'
        })

        common.getUserByName(value, function (data) {
          that.userList = data;
          that.$vux.loading.hide();
        });
      },
      ajax(id){
        var that = this;
        that.$vux.loading.show({
          text: '加载中...'
        })
        common.getUsersByOrgId(id, (res) => {
          that.orgShowForm = res.list.orgShowForm;
          that.userList = res.list.userList;
          that.orgShowFormArr.push(that.orgShowForm);
          that.userListArr.push(that.userList);
          that.$vux.loading.hide();
        }, (err) => {
          that.$vux.loading.hide();
          $flightTools.errorToIndex(that);
        })
      },
      /*将列表中选中的成员添加到乘机人列表*/
      addPassenger2(item){
        console.log(item)
        var entryCode = this.$store.state.entryCode;
        let cardHas = false;//是否存在有证件号的证件
        let cardOne = {};//第一个有证件号的证件类型
        if (item.cardMaps.length > 0) {
          if (entryCode == 3) { //坐火车选人
            for (var value  of  item.cardMaps) {
              if (value.credentialNo != '' && (value.credentialName == '护照' || value.credentialName == '身份证' || value.credentialName == '台湾通行证' || value.credentialName == '港澳通行证')) {
                cardHas = true;
                cardOne = value;
                break
              }
            }
          } else {
            for (var value  of  item.cardMaps) {
              if (value.credentialNo != '') {
                cardHas = true;
                cardOne = value;
                break
              }
            }
          }
        }

        console.log(cardOne)
        var newP = {};
        if (item.travellerType === '1' && cardHas == false) {//非员工
          this.$store.state.staffSelect = item;
          this.$router.push({
            name: 'addPassengerStaff'
          })
        } else if (item.travellerType === '3' && (cardHas == false || item.empLevelCode === '' || item.empLevelCode === undefined)) {
          this.$store.state.staffSelect = item;
          this.$router.push({
            name: 'addPassengerStaff'
          })
        } else {
          newP.credentialName = cardOne.credentialName;
          newP.credentialType = cardOne.credentialType;
          newP.credentialNo = cardOne.credentialNo;
          newP.passengerType = "ADU";
          newP.checked = true;

          newP.cardTypeInfo = item.cardMaps;

          newP.userId = item.userId;
          newP.birthday = item.birthday;
          newP.empLevelCode = item.empLevelCode;
          newP.isPassEmpLevel = item.isPassEmpLevel;
          newP.name = item.fullname;
          newP.sex = item.sex;
          newP.sexType = item.sexType;
          newP.travellerType = item.travellerType;
          newP.orgId = "";
          newP.costUnitCode = "";
          newP.corporationId = "";
          newP.amount = "";
          newP.mobile = "";
          newP.email = "";
          newP.travelCode = "";

          for (var i = 0; i < this.passengers.length; i++) {
            if (newP.name == this.passengers[i].name || newP.credentialNo == this.passengers[i].credentialNo) {
              this.$store.state.passengers[i].checked = true;
            }
          }

          var pArr = [];
          pArr.push(newP);
          this.$store.commit('setRecentPassengerList', pArr);

//          这个逻辑其实是不需要的,员工列表添加员工的时候就应该告诉他 id重复或者证件号重复
          for (var i = 0; i < this.passengers.length - 1; i++) {
            if (newP.userId == this.passengers[i].userId || newP.credentialNo == this.passengers[i].credentialNo) {
              this.$store.state.passengers[i].checked = true;
//              alert('该联系人证件号在最近联系人中已被使用');
              this.$store.state.passengers.pop()
            }
          }
          this.$router.go(-1);
        }
      }
    },
    mounted(){
      document.body.scrollTop = 0;
//      this.init();
      this.orgShowForm = this.res.list.orgShowForm;//展示部门列表
      this.userList = this.res.list.userList;//展示员工列表
      this.orgShowFormArr.push(this.orgShowForm);
      this.userListArr.push(this.userList);
      this.department.push(this.res.list.orgPashShow[0].orgName);//头部显示的部门层级
    },
    computed: {
      res(){
        return this.$store.state.staffList.res;
      },
      department1(){
        return this.department.join("<");
      },
      passengerAll(){
        return this.$store.state.passengers
      },
      passengers(){
        return this.$store.state.passengers
      }
    }
  }
</script>
